<template>
  <div class="comDialog">
    <!-- 黑色层 -->
    <div
      class="modal"
      v-show="visible"
    ></div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :modal="false"
      :before-close="beforeClose"
    >
      <!-- 插槽 -->
      <slot></slot>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="visible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="$emit('click',title)"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "comDialog",
  data() {
    return {
      visible: false,
      title: '',
      formLabelWidth: "60px",
      flag: true
    };
  },
  created() {
    this.$bus.$on("visibleDialog", (title, flag = true) => {
      this.visible = flag
      this.title = title
    })
  },
  methods: {
    beforeClose(done) {
      this.$bus.$emit("visibleDialog", '', false)
      done(true)
    }
  }
};
</script>

<style  scoped>
.modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
::v-deep .el-dialog {
  width: 480px !important;
}
::v-deep .el-dialog__body {
  padding: 30px 30px 10px;
}
::v-deep .el-input__inner {
  width: 270px;
}
</style>
